import { defineConfig, loadEnv } from 'vite' // 导入 defineConfig 和 loadEnv 函数
import vue from '@vitejs/plugin-vue' // 导入 Vue 插件
import AutoImport from 'unplugin-auto-import/vite' // 导入 AutoImport 插件
import Components from 'unplugin-vue-components/vite' // 导入 Components 插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 导入 ElementPlusResolver
import path from 'path' // 导入 path 模块

/**
 * Vite 配置文件
 * @type {import('vite').UserConfig}
 */

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [
      vue(), // 使用 Vue 插件
      AutoImport({
        imports: ['vue', 'vue-router'], // 自动导入 Vue 和 Vue Router 的 API
        dts: 'src/auto-imports.d.ts', // 生成声明文件
        resolvers: [
          ElementPlusResolver(),
        ], // 自动导入 Element Plus 组件
      }),
      Components({
        dts: 'src/components.d.ts', // 生成声明文件
        resolvers: [
          ElementPlusResolver(), // 自动导入 Element Plus 组件
        ], 
      }),
      // Icons({
      //   autoInstall: true,
      // }),
    ],
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL, // 代理的目标地址
          changeOrigin: true, // 是否改变请求源
          rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
        },
      },
      open: false, // 自动打开浏览器
    },
    build: {
      outDir: 'dist', // 构建输出目录
      assetsDir: 'assets', // 静态资源目录
      sourcemap: true, // 生成 source map 文件
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 设置 @ 别名
        'axiosInstance': path.resolve(__dirname, 'src/utils/axiosInstance.js'), // 设置 axios-instance 别名
      },
      extensions: ['.vue', '.js', '.json'] // 配置自动处理的扩展名
    },
    define: {
      'process.env': {
        ...process.env,
        ...env,
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
  };
});
